<template>
  <div class="containers">
    <div class="findBOx">
      <span class="askNumber">VEHICLE NUMBER</span>
      <a-input placeholder="YU123456W" class="input-box" v-model="idNumber" />
      <a-button type="primary" class="sureAsk" @click="findSearch">
        next
      </a-button>
    </div>

    <div class="dataList">
      <div class="head-show-data" v-if="oldDtata.length > 0">
        <tr>
          <td>Vehicle：</td>
          <td>{{ idNumber }}</td>
        </tr>
      </div>

      <div
        v-for="(item, index) in oldDtata"
        :key="index"
        class="data-show-area"
      >
        <input type="checkbox" :checked="item.checked" class="checkArea" />
        <div class="right-show-data">
          <tr>
            <td class="names">Vehicle Plate No:</td>
            <td>{{ idNumber }}</td>
          </tr>
          <tr>
            <td class="names">entryDateTime:</td>
            <td>{{ item.entryDateTime }}</td>
          </tr>
          <tr>
            <td class="names">exitDateTime:</td>
            <td>{{ item.exitDateTime }}</td>
          </tr>
          <tr>
            <td class="names">totalAmount:</td>
            <td>{{ item.tranAmount }}</td>
          </tr>
        </div>
      </div>
    </div>

    <div v-if="oldDtata.length > 0" class="RefS">
      <td class="names">Ref Number:：</td>
      <td><a-input placeholder="123456" /></td>
    </div>
    <div class="RefS" v-if="oldDtata.length > 0">
      <a-button style="width: 600px" @click="paymentHandle">
        Make Payment</a-button
      >
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件
  components: {},
  data() {
    return {
      idNumber: "YU123456W",
      oldDtata: [],
    };
  },
  //方法集合
  methods: {
    findSearch() {
      // console.log(this.idNumber);
      // console.log(this.rq);
      this.rq
        .get(`carpark/api/adhoc/transactions/${this.idNumber}`, {})
        .then((res) => {
          // console.log(res.data.data["parkingTransactions"], "回来的数据");
          this.oldDtata = res.data.data["parkingTransactions"];
          this.oldDtata.forEach((a) => {
            a["checked"] = false;
          });

          console.log(this.oldDtata, "需要渲染的数据");
        });
    },
    paymentHandle() {
      this.$message.info("success");
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.oldDtata = [];
  },
};
</script>
<style  lang="less" scoped >
.containers {
  height: 75vh;
  box-sizing: border-box;
  border: 1px solid #f2f3f8;
  background-color: #fff;
  .findBOx {
    // border: 1px solid red;
    height: 60px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .askNumber {
      width: 10%;
      display: flex;
      justify-content: flex-end;
    }
    .input-box {
      width: 70%;
    }
    .sureAsk {
      width: 10%;
    }
  }
  .dataList {
    .names {
      // border: 1px solid red;
      width: 260px;
      margin-right: 30px;
      text-align: start;
    }
    .head-show-data {
      margin-bottom: 20px;
    }
    // border: 1px SOLID red;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    box-sizing: border-box;
    padding-top: 4%;
    overflow-y: scroll;
    .data-show-area {
      display: flex;

      align-items: center;
      border-bottom: 1px dashed black;
      border-top: 1px dashed black;
      .checkArea {
        margin-right: 20px;
      }
    }
  }

  .RefS {
    display: flex;
    justify-content: center;
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
</style>